[V0_FILE]typescriptreact:file="app/page.tsx" import { HeroSection } from "@/components/hero-section" import { FeaturesSection } from "@/components/features-section" import { ProjectsSection } from "@/components/projects-section" import { ContactSection } from "@/components/contact-section" export default function HomePage() { return (

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" "use client" import { useState, useEffect } from "react" import { EnhancedThreeScene } from "@/components/enhanced-three-scene" import { Button } from "@/components/ui/button" import { ArrowDown } from "lucide-react" export function HeroSection() { const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { setIsLoaded(true) }, []) return (

{/* 3D Scene Background */} {isLoaded && } {/* Content overlay */}

Interactive 3D Experience

Explore our cutting-edge visualization platform powered by Three.js and React

{/* Scroll indicator */}

) } [V0_FILE]typescriptreact:file="components/enhanced-three-scene.tsx" "use client" import { useRef } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, PerspectiveCamera, Environment, Float, Stars } from "@react-three/drei" import type * as THREE from "three" export function EnhancedThreeScene() { return (

) } function SceneContent() { const groupRef = useRef(null) useFrame(({ clock }) => { if (groupRef.current) { groupRef.current.rotation.y = clock.getElapsedTime() * 0.1 } }) return ( {/* Central object */} {/* Orbiting spheres */} ) } function TorusKnot(props: any) { const meshRef = useRef(null) useFrame(({ clock }) => { if (meshRef.current) { meshRef.current.rotation.x = clock.getElapsedTime() * 0.3 meshRef.current.rotation.y = clock.getElapsedTime() * 0.4 } }) return ( ) } function OrbitingSpheres({ count = 5, radius = 3 }) { const spheres = Array.from({ length: count }).map((_, i) => { const angle = (i / count) * Math.PI * 2 const x = Math.cos(angle) * radius const z = Math.sin(angle) * radius const y = (Math.random() - 0.5) * 2 const scale = 0.2 + Math.random() * 0.2 return { position: [x, y, z], scale, speed: 0.5 + Math.random() * 0.5 } }) return ( <> {spheres.map((sphere, i) => ( ))} ) } [V0_FILE]typescriptreact:file="components/features-section.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { CuboidIcon as Cube3d, Layers, Zap, Palette, Globe, Users } from "lucide-react" const features = [ { title: "3D Visualization", description: "Interactive 3D models with real-time rendering and physics simulation.", icon: , }, { title: "Responsive Design", description: "Optimized for all devices from mobile phones to large desktop displays.", icon: , }, { title: "High Performance", description: "Built with performance in mind, ensuring smooth interactions even with complex scenes.", icon: , }, { title: "Customizable Themes", description: "Easily adapt the visual style to match your brand or personal preferences.", icon: , }, { title: "Global Accessibility", description: "Accessible from anywhere in the world with optimized loading times.", icon: , }, { title: "Collaborative Tools", description: "Work together with team members in real-time on shared projects.", icon: , }, ] export function FeaturesSection() { return (

Powerful Features

Our platform combines cutting-edge technology with intuitive design to deliver an exceptional user experience.

{features.map((feature, index) => (

{feature.icon}

{feature.title} {feature.description} ))}

) } [V0_FILE]typescriptreact:file="components/projects-section.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" // Simulated project data that would normally come from an API const projectsData = [ { id: 1, title: "Architectural Visualization", description: "Interactive 3D models of architectural designs with realistic lighting and materials.", image: "/placeholder.svg?height=300&width=500", category: "Architecture", }, { id: 2, title: "Product Showcase", description: "3D product visualization allowing users to interact and explore product features.", image: "/placeholder.svg?height=300&width=500", category: "E-commerce", }, { id: 3, title: "Educational Platform", description: "Interactive learning experiences with 3D models for educational purposes.", image: "/placeholder.svg?height=300&width=500", category: "Education", }, { id: 4, title: "Gaming Environment", description: "Immersive 3D environments for web-based gaming experiences.", image: "/placeholder.svg?height=300&width=500", category: "Gaming", }, ] export function ProjectsSection() { const [projects, setProjects] = useState(null) const [loading, setLoading] = useState(true) // Simulate data fetching useEffect(() => { const fetchProjects = async () => { // In a real app, this would be an API call await new Promise((resolve) => setTimeout(resolve, 1500)) setProjects(projectsData) setLoading(false) } fetchProjects() }, []) return (

Featured Projects

Explore some of our recent work showcasing the capabilities of our 3D visualization platform.

{loading ? // Loading skeletons Array(4) .fill(0) .map((_, index) => ( )) : // Actual project cards projects?.map((project) => (

{project.title}

{project.description}

))}

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" export function ContactSection() { const { toast } = useToast() const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Message sent!", description: "We'll get back to you as soon as possible.", }) setFormData({ name: "", email: "", message: "" }) setIsSubmitting(false) } return (

Get In Touch

Have questions about our platform or interested in a custom solution? Reach out to us!

Name

Message

</div>
            <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700" disabled={isSubmitting}>
              {isSubmitting ? "Sending..." : "Send Message"}
            </Button>
          </form>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/site-header.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
import { useMobile } from "@/hooks/use-mobile"

const navItems = [
  { label: "Home", href: "#" },
  { label: "Features", href: "#" },
  { label: "Projects", href: "#" },
  { label: "Contact", href: "#" },
]

export function SiteHeader() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const isMobile = useMobile()

// Handle scroll effect
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled ? "bg-black/80 backdrop-blur-md py-3" : "bg-transparent py-5"
      }`}
    >
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between">
          {/* Logo */}
          <Link href="/" className="text-white font-bold text-2xl">
            3D<span className="text-blue-500">Vision</span>
          </Link>

{/* Desktop Navigation */}
          {!isMobile && (
            <nav className="hidden md:flex items-center space-x-8">
              {navItems.map((item, index) => (
                <Link key={index} href={item.href} className="text-white hover:text-blue-400 transition-colors">
                  {item.label}
                </Link>
              ))}
              <Button className="bg-blue-600 hover:bg-blue-700">Get Started</Button>
            </nav>
          )}

{/* Mobile Menu Button */}
          {isMobile && (
            <Button
              variant="ghost"
              size="icon"
              className="md:hidden text-white"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </Button>
          )}
        </div>
      </div>

{/* Mobile Navigation */}
      {isMobile && isMenuOpen && (
        <div className="md:hidden bg-black/95 backdrop-blur-md">
          <nav className="container mx-auto px-4 py-5 flex flex-col space-y-4">
            {navItems.map((item, index) => (
              <Link
                key={index}
                href={item.href}
                className="text-white hover:text-blue-400 transition-colors py-2 text-lg"
                onClick={() => setIsMenuOpen(false)}
              >
                {item.label}
              </Link>
            ))}
            <Button className="bg-blue-600 hover:bg-blue-700 w-full mt-4">Get Started</Button>
          </nav>
        </div>
      )}
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/site-footer.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Facebook, Twitter, Instagram, Linkedin, Github } from "lucide-react"

export function SiteFooter() {
  return (
    <footer className="bg-gray-950 text-gray-300 pt-16 pb-8">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          {/* Company Info */}
          <div>
            <h3 className="text-white text-xl font-bold mb-4">3DVision</h3>
            <p className="mb-4">
              Creating immersive 3D experiences for the web. Our platform enables developers and designers to build
              stunning interactive visualizations.
            </p>
            <div className="flex space-x-4">
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                <Facebook className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                <Twitter className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                <Instagram className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                <Linkedin className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                <Github className="h-5 w-5" />
              </Button>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="text-white text-lg font-bold mb-4">Quick Links</h3>
            <ul className="space-y-2">
              {["Home", "Features", "Projects", "Pricing", "About Us", "Contact"].map((item, index) => (
                <li key={index}>
                  <Link href="#" className="hover:text-white transition-colors">
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Resources */}
          <div>
            <h3 className="text-white text-lg font-bold mb-4">Resources</h3>
            <ul className="space-y-2">
              {["Documentation", "Tutorials", "Blog", "API Reference", "Community", "Support"].map((item, index) => (
                <li key={index}>
                  <Link href="#" className="hover:text-white transition-colors">
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Newsletter */}
          <div>
            <h3 className="text-white text-lg font-bold mb-4">Subscribe</h3>
            <p className="mb-4">Stay updated with our latest features and releases.</p>
            <div className="flex space-x-2">
              <Input type="email" placeholder="Your email" className="bg-gray-800 border-gray-700" />
              <Button className="bg-blue-600 hover:bg-blue-700">Subscribe</Button>
            </div>
          </div>
        </div>

<div className="border-t border-gray-800 pt-8 mt-8 text-sm text-gray-500 text-center">
          <p>© {new Date().getFullYear()} 3DVision. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import "@/app/globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider attribute="class" defaultTheme="dark">
          <SiteHeader />
          {children}
          <SiteFooter />
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
  }

@keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescript:file="hooks/use-mobile.ts" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"

export const useMobile = () => {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768) // Adjust breakpoint as needed
    }

// Set initial value
    handleResize()

// Add event listener
    window.addEventListener("resize", handleResize)

// Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleResize)
  }, [])

return isMobile
}
</article></body></html>

About

Tags

Share

More from chinpeerapat

More Templates Like This

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This